import BackgroundImg from "@assets/bg02.jpg";
import CustomizedRmk from "@assets/customized_rmk.png";
import DragonYun from "@assets/dragon_yun.png";
import GoButton from "@assets/go_button.png";
import UsedTextOther from "@assets/used_text_other.png";
import UsedTextUs from "@assets/used_text_us.png";
import BaseBackground from "@plugin/BaseBackground";
import EnhanceUseNavigate from "@plugin/EnhanceUseNavigate";
import React, { Component } from "react";
import MyRewardButton from "../../../plugin/MyRewardButton";
import { getChannel, getCode, navigateToMiniHome } from "../../../utils";
import { CampaignIds } from "../../../utils/ha.common";
import styles from "./index.module.scss";

class Index extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isOwnUse: false,
    };
  }

  componentDidMount() {
    const search = new URLSearchParams(window.location.search);
    this.setState({
      isOwnUse: search.get("owner") === "1" ? true : false,
    });

    //配合埋点需要， 记录一下是否是本人核销
    sessionStorage.setItem(
      "is_personnal_use",
      search.get("owner") === "1" ? "ForPersonalUse" : "NotForPersonalUse"
    );

    window._ha("send", "action", "cny_activity2_usedpage_view", {
      channel: getChannel(),
      code: getCode(),
      is_personnal_use: sessionStorage.getItem("is_personnal_use"),
      campaign_id: CampaignIds.activity2,
    });
  }

  render() {
    const { isOwnUse } = this.state;
    return (
      <BaseBackground
        backgroundImage={BackgroundImg}
        showFlag={true}
        showMyAward={true}
      >
        <div>
          <div className={styles.write_off_box}>
            <div className={styles.write_off_conetnt}>
              {isOwnUse ? (
                <div className={styles.write_off_text}>
                  <img
                    src={UsedTextUs}
                    className={styles.used_text_us}
                    alt=""
                  />
                </div>
              ) : (
                <div className={styles.write_off_text}>
                  <img
                    src={UsedTextOther}
                    className={styles.used_text_other}
                    alt=""
                  />
                </div>
              )}
            </div>
            <img className={styles.dragon_yun} src={DragonYun} alt="" />
          </div>
          <img src={CustomizedRmk} className={styles.customized_rmk} alt="" />
          <img
            onClick={() => {
              navigateToMiniHome(
                "/pages/userPackage/FY2324CNYBeSpoke?scene=luckydraw",
                () => {
                  this.props.navigate("/");
                }
              );

              window._ha(
                "send",
                "action",
                "cny_activity2_usedpage_gotovideo_click",
                {
                  campaign_id: CampaignIds.activity2,
                  channel: getChannel(),
                  code: getCode(),
                  is_personnal_use: sessionStorage.getItem("is_personnal_use"),
                }
              );
            }}
            src={GoButton}
            className={styles.go_button}
            alt=""
          />
        </div>

        <MyRewardButton
          onClick={() => {
            this.props.navigate("/activity_my_award_2");
            window._ha(
              "send",
              "action",
              "cny_activity2_usedpage_mygift_click",
              {
                campaign_id: CampaignIds.activity2,
                channel: getChannel(),
                code: getCode(),
                is_personnal_use: sessionStorage.getItem("is_personnal_use"),
              }
            );
          }}
        />
      </BaseBackground>
    );
  }
}

export default EnhanceUseNavigate(Index);
